<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #fff;
        background: linear-gradient(to right, #01c4fa, #1296fa);
      }
      #app .el-dialog__header {
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- dialog
el-dialog   title:标题   visible.sync:boolean值 true显示false不显示
         width:宽度   show-close:是否显示关闭按钮
   slot="title/footer" 重写某部分

-->
      <el-button @click="isShow=true">显示弹框</el-button>
      <el-dialog :visible.sync="isShow" width="500px" :show-close="false">
        <div class="title" slot="title">用户注册</div>
        <el-form label-width="80px" :model="form" :rules="rules" ref="form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username"></el-input>
            
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="isShow=false">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <script src="./vue.js"></script>
    <script src="./ele.js"></script>
    <link rel="stylesheet" href="./element.css" />
    <script>
      new Vue({
        el: "#app",
        data: {
          isShow: false,
          rules: {
            username: [{ required: true, message: "必填", trigger: "change" }],
          },
          form: {
            username: "",
          },
        },
        methods: {
          submit() {
            this.$refs.form.validate((result) => {
              if (result) {
                this.$message.success("成功");
              } else {
                this.$message.error("失败");
              }
            });
          },
        },
      });
    </script>
  </body>
</html>
